<!-- 
Retina（视网膜屏幕）
    是一种显示技术，可以将更多的物理像素点压缩到一块屏幕里，进而实现更高的分别率，显示得更细腻清晰。
    例如：
        普通情况下  2px*2px 总的物理像素点为 4个
        Retina技术  2px*2px 总的物理像素点为 16个
    同一个尺寸大小，所能存放的物理像素点个数不同

二倍图
    一张50px*50px的图片，放大2倍后（或者在Retina设备中呈现），呈现出来的将是100px*100px的图片，会变模糊；
        毕竟原本只有2500像素点的图片，经过Retina处理后，需要2500*4个像素点，肯定会模糊的
    一张100px*100px的图片，初始只显示50px*50px的样式，放大2倍后（或者在Retina设备中呈现），呈现出来的是100px*100px的图片，不会变模糊；

二倍图的原理（利用倍数关系）
    在viewport环境下，美工提供2倍或多倍尺寸大小的图片，然后前端开发手动的以更小比例去缩小图片显示
    图片存放的尺寸为：100px*100px、图片显示的尺寸为：50px*50px
    
    预先准备的图片比实际需要的图片大2倍，这就是2倍图方案（多倍图同理）

注意
  电脑上模拟的可能看不出区别，在手机上测试时才看得清楚

拓展：
    1）图片是像素点，会有模糊的问题；
        文字是矢量大小，不存在模糊问题。
    2）Snipaste预设尺寸大小截图
        Shift + F1
 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>二倍图</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img:nth-child(2) {
        /* 普通图片，利用宽高 */
        width: 50px;
        height: 50px;
        /* 背景图片，利用bg-size */
        /* background-size: 50px 50px; */
      }
    </style>
  </head>
  <body>
    <img src="./images/img50px.png" alt="" />
    <img src="./images/img100px.png" alt="" />
  </body>
</html>
